<template>
  <div class="cretificate-main">
    <el-row>
      <el-form class="userinfoSearch" ref="form" :model="searchdata">
        <div class="search-item">
          <el-date-picker
            type="date"
            size="mini"
            placeholder="选择下载日期"
            :picker-options="timeChange"
            v-model="searchdata.downloadDate"
            @change="searchtime"
          ></el-date-picker>
        </div>

        <div class="search-item">
          <el-button type="primary" size="small" @click="searchbtn">搜索</el-button>
          <el-button type="info" size="small" @click="restbtn">重置</el-button>
        </div>
      </el-form>
    </el-row>
    <!-- <el-row :gutter="5">
      <el-col class="batch-btn">
        <el-button type="success"  size="small" icon="el-icon-download" @click="outExceldo"
          >导出Excel</el-button
    >-->
    <!-- <el-button type="danger" icon="el-icon-delete-solid" @click="deletebtn">删除</el-button> -->
    <!-- </el-col>
    </el-row>-->
    <el-table
      V-loading="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :cell-style="{'text-align':'center'}"
      :header-cell-style="getRowClass"
      @selection-change="handleSelectionChange"
      @row-click="rowbtn"
      border
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="编号" width="100px">
        <template slot-scope="scope">{{ scope.row.id}}</template>
      </el-table-column>
      <!--      <el-table-column-->
      <!--        prop="id"-->
      <!--        label="编号"-->
      <!--      >-->
      <!--      </el-table-column>-->
      <el-table-column prop="downloadSuccess" label="下载成功"></el-table-column>
      <el-table-column prop="downloadFail" label="下载失败"></el-table-column>

      <el-table-column prop="notDownload" label="未下载"></el-table-column>
      <el-table-column label="下载日期">
        <template slot-scope="scope">{{ scope.row.downloadDate }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :hide-on-single-page="value"
      :current-page="currentPage1"
      :page-sizes="[10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="toal"
    ></el-pagination>
  </div>
</template>

<script>
import { getuserInfodata, getuserromesearching } from "../../api/datastac";
import { mapMutations } from "vuex";
import userExcel from "../../utils/outExcel/uerromeExcel";
export default {
  components: {},
  props: {},
  data() {
    return {
      value: false,
      pageSize: 1,
      tableData: [],
      currentPage1: 1,
      batchdata: {
        timeendvalue: "",
      },
      ids: [],
      timeChange: {
        disabledDate(time) {
          return (
            time.getTime() < Date.now() - 3600 * 1000 * 24 * 183 ||
            time.getTime() > Date.now()
          ); //选择时间范围
        },
      },
      toal: 0,
      pageDto: {
        pageNum: 1,
        pageSize: 10,
      },
      // 初始检索数据
      searchdata: {
        downloadDate: "",
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    ...mapMutations([
      "changePageSizeData",
      "changePageNumeData",
      "changePageToal",
      "setoutexcelId",
      "setoutexcelclassId",
      "batchid",
    ]),

    // 表格第一行显示背景
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F7FA;text-align:center";
      } else {
        return "";
      }
    },
    // 获取信息
    getuserInfostatc(data) {
      console.log(data);
      getuserInfodata(data)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.toal = res.data.data.total;
            this.tableData = res.data.data.list;
            this.getcertId(this.tableData);
          } else {
            this.tableData = [];
          }
        })
        .catch((err) => {
          return err;
        });
    },

    //每页显示的条数
    handleSizeChange(val) {
      this.changePageSizeData(val);
      this.pageDto.pageSize = val;
      // this.getuserInfostatc(this.pageDto);
      this.searchbtn();
    },
    // 页数切换
    handleCurrentChange(val) {
      console.log(val);
      // this.changePageNumeData(val);
      this.pageDto.pageNum = val;
      this.searchbtn();
      // this.getuserInfostatc(this.pageDto);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.getcertId(val);
    },
    // 单击某一行时选中
    rowbtn(val) {
      this.toggleSelection([val]);
    },
    // 搜索
    searchbtn() {
      if (this.searchdata.downloadDate == "") {
        // this.$message({
        //   type: "warning",
        //   message: "选择日期",
        // });
        this.getuserInfostatc(this.pageDto);
      } else {
        this.searchdata.pageNum = this.pageDto.pageNum;
        this.searchdata.pageSize = this.pageDto.pageSize;
        this.searchdatado(this.searchdata);
      }
    },
    // 检索信息
    searchdatado(data) {
      getuserromesearching(data)
        .then((res) => {
          if (res.data.code == 200) {
            this.toal = res.data.data.total;
            this.tableData = res.data.data.list;

            this.getcertId(this.tableData);
          } else {
            this.tableData = [];
          }
        })
        .catch((err) => {
          return err;
        });
    },
    timedispose(time) {
      let date = new Date(time);
      return `${date.getFullYear()}-${this.zero(
        date.getMonth() + 1
      )}-${this.zero(date.getDate())}`;
    },
    // 时间补零
    zero(n) {
      return n > 10 ? n : "0" + n;
    },
    //创建时间处理
    searchtime() {
      this.searchdata.downloadDate = this.timedispose(
        this.searchdata.downloadDate
      );
    },
    getcertId(val) {
      this.ids = [];
      val.filter((item, index) => {
        this.ids.push(item.id);
      });
    },
    // // 导出Excel
    outExceldo() {
      //console.log(this.tableData);
      userExcel(this.ids);
      // plalindromeExcel(this.tableData);
    },
    // 重置
    restbtn() {
      this.searchdata.downloadDate = "";
      // this.getuserInfostatc(this.pageDto);
    },
  },
  created() {},
  mounted() {
    this.getuserInfostatc(this.$store.state.pagedata);
  },
};
</script>
<style lang="less" scoped>
@max1920: ~"(max-width: 1920px)";
.cretificate-main {
  width: 100%;
  box-sizing: border-box;
  .search-item {
    .line-date {
      display: inline-block;
    }
    /deep/.el-button {
      margin-left: 30px;
    }
    /deep/.el-button + .el-button {
      margin-left: 15px;
    }
    /deep/.el-form-item {
      margin-bottom: 0px;
    }
    /deep/.el-form-item__label {
      color: #333;
      font-weight: bold;
      text-align: left;
    }
    /deep/.el-date-editor--date {
      box-sizing: border-box;
    }
  }
  .batch-btn {
    box-sizing: border-box;
    .searchdown {
      display: inline-block;
      color: #333;
      font-weight: bold;
      margin-left: 30px;
      /deep/.element-icons {
        vertical-align: middle;
        margin-right: 3px;
      }
    }
  }
  /deep/.el-table {
    margin: 20px 0 30px 0;
    box-sizing: border-box;
  }
  /deep/.el-pager .number {
    background: #fff;
    border: 1px solid #dcdfe6;
    margin: 0 5px;
    border-radius: 2px;
    &.active {
      background-color: #409eff;
      color: #fff;
      border: 1px solid #409eff;
    }
  }
}
/deep/.el-pagination {
  text-align: center;
}
.el-button--mini,
.el-button--small {
  font-size: 11px !important;
}
.userinfoSearch{
  display: flex;
}
</style>
<style>
.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  line-height: 35px !important;
}
.el-input--mini .el-input__inner {
  line-height: 33px;
  height: 33px;
}
.cretificate-main .el-date-editor .el-input__inner{
  width: 180px;
}
</style>
